import { Modal, Button, Grid } from '@arco-design/web-react';
import React, { ReactNode } from 'react';
const { Row } = Grid;

interface Props {
  className?: string;
  contentClassName?: string;
  children?: ReactNode;
  title: ReactNode;
  onConfirm?: () => void;
  onCancel?: () => void;
  show?: boolean;
  cancelText?: string;
  confirmText?: string;
  cancelBtnShow?: boolean;
  confirmBtnShow?: boolean;
  closeIcon?: boolean;
  maskClosable?: boolean;
  footer?: ReactNode;
  footChildrenLeft?: ReactNode;
}
export default function DetailModal({
  children,
  title,
  show,
  onCancel,
  onConfirm,
  footChildrenLeft,
  cancelText = '取消',
  confirmText = '确定',
  cancelBtnShow = true,
  confirmBtnShow = true,
  className = '',
  contentClassName = '',
  closeIcon = true,
  maskClosable = true,
  footer,
}: Props) {
  if (!show) return null;
  return (
    <Modal
      className={className}
      title={title}
      visible={true}
      onCancel={onCancel}
      closeIcon={closeIcon}
      maskClosable={maskClosable}
      escToExit
      footer={
        footer ?? (
          <>
            {footChildrenLeft}
            {cancelBtnShow && <Button onClick={() => onCancel && onCancel()}>{cancelText}</Button>}
            {confirmBtnShow && (
              <Button type="primary" onClick={() => onConfirm && onConfirm()}>
                {confirmText}
              </Button>
            )}
          </>
        )
      }
    >
      <Row className={`maxh-400 scroll-bar-h-min ${contentClassName} pr-20`}>{children}</Row>
    </Modal>
  );
}
